<template>
    <view style="height: 100%">
        <!-- pages/activity/activity.wxml -->
        <view class="navis">
            <view class="navis-child" :data-type="item.type" @tap="changeType" v-for="(item, index) in tabs" :key="index">
                <image :src="'../../resource/' + item.type + '.png'" class="navis-ph"></image>

                {{ item.name }}

                <view class="navis-active"></view>
            </view>
        </view>
        <block v-if="type === 'recommend'"></block>
        <input type="text" class="header-input" placeholder="搜索活动" placeholder-style="font-size:26rpx;text-align:center;" @input="handleInputChange" />
        <view class="item" :data-sign="item.type" @tap="handlePage" v-for="(item, index) in searchList ? searchList : ac" :key="index">
            <image class="item-image" :src="item.img"></image>

            <view class="item-content">
                <view class="item-content-title">{{ item.title }}</view>
                <text class="item-content-tags-content">{{ item.time }}</text>
                <text class="item-content-tags-content">{{ item.type }}</text>
                <text class="item-content-tags-content">{{ item.else }}</text>
            </view>
        </view>
        <block v-if="type === 'path'"></block>
    </view>
</template>

<script>
// pages/activity/activity.js

//格式化日期

export default {
    data() {
        return {
            ac: [
                {
                    img: '/static/resource/t.jpg',
                    title: '活动一',
                    time: '2020-9-8',
                    type: 'sport',
                    else: '其他'
                },
                {
                    img: '/static/resource/t.jpg',
                    title: '活动一',
                    time: '2020-9-8',
                    type: 'sport',
                    else: '其他'
                },
                {
                    img: '/static/resource/t.jpg',
                    title: '活动一',
                    time: '2020-9-8',
                    type: 'sport',
                    else: '其他'
                },
                {
                    img: '/static/resource/t.jpg',
                    title: '活动一',
                    time: '2020-9-8',
                    type: 'sport',
                    else: '其他'
                }
            ],
            searchList: null,
            tabs: [
                {
                    name: '活动发帖',
                    type: 'recommend'
                },
                {
                    name: '活动预览',
                    type: 'path'
                }
            ],
            type: 'recommend'
        };
    },
    methods: {
        changeType(e) {
            const type = e.currentTarget.dataset.type;
            this.setData({
                type
            });
        }
    }
};
</script>
<style>
/* pages/activity/activity.wxss */
.navis {
    margin-top: 20rpx;
    display: flex;
    line-height: 60rpx;
    padding-right: 10rpx;
    margin-bottom: 10rpx;
}
.navis-child {
    text-align: center;
    font-size: 32rpx;
    flex: 1;
    color: #444647;
    position: relative;
}
.navis-ph {
    width: 36rpx;
    height: 36rpx;
    position: relative;
    top: 9rpx;
}

.header-input {
    border: 1rpx solid #a0a7ad;
    margin: 22rpx 36rpx 14rpx 36rpx;
    line-height: 65rpx;
    border-radius: 36rpx;
    padding: 0 36rpx;
}
.item {
    display: flex;
    margin-top: 16rpx;
}
.item-image {
    width: 208rpx;
    height: 150rpx;
    border-radius: 16rpx;
    margin-left: 24rpx;
}
.item-content {
    flex: 1;
    margin-left: 24rpx;
    border-bottom: 1rpx solid #d9dde1;
    margin-right: 40rpx;
}
.item-content-title {
    line-height: 48rpx;
    font-size: 32rpx;
    columns: #282828;
    font-weight: bold;
}
.item-content-tags-content {
    font-size: 24rpx;
    line-height: 16rpx;
    color: #f1b1b1;
    font-weight: bold;
    margin-right: 18rpx;
}
.topImg {
    width: 704rpx;
    height: 182rpx;
    margin-left: 21rpx;
    position: relative;
    margin-top: 50rpx;
}
</style>
